import React from 'react'
import { Row,Col } from "antd";
import './style.less'
import Util from '../../utils/utils'
import service from '../../service'
export default class test extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            "userName":"黄鹏",
            "sysTime":"",
            "dayPictureUrl":"",//天气图片
            "weather":null,//天气状况
        }
        setInterval(() => {
            let sysTime = Util.formateDate(new Date().getTime());
            this.setState({
                sysTime
            })
        }, 1000)
    }
    componentWillMount(){
        this.getWeatherAPIData();
    }
    //获取天气
    getWeatherAPIData() {
        let city = '北京';
        service.jsonp({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=3p49MVra6urFRGOT9s8UBWr2'
        }).then((res) => {
            if (res.status == 'success') {
                console.log(res)
                let data = res.results[0].weather_data[0];
                this.setState({
                    dayPictureUrl: data.dayPictureUrl,
                    weather: data.weather
                })
            }
        })
    }
    render() {
        return (
            <header>
                <Row  >
                    <Col span={24} >
                        <div className="header-top" >
                        <span>欢迎，黄鹏!</span>
                        <a>退出</a>
                        </div>
                    </Col>
                </Row>
                <Row className="header-bot">
                    <Col span={12}><span className="page-title">首页</span></Col>
                    <Col span={12}>
                    <div className="web-div">
                        <span className="time">{this.state.sysTime}</span>
                            <span><img src={this.state.dayPictureUrl} /></span>
                            <span className="wether">{this.state.weather}</span>
                    </div>
                    </Col>

                </Row>
            </header>
        )
    }
}